<template>
	<view style="background-color: #FF5555;">
		
		<view :class="{register:top}">
			<!-- <image src="../../../static/logo/logo.png" class="logo" mode="widthFix"></image> -->
			<view class="content">
				<view>
					<input class="uni-input" @input="mobileInput" type="number" placeholder="您的手机号" placeholder-style="color:#aaa" style="background: transparent;"  />
					<view class="webkit" style="margin: 0 30upx;border-bottom: 1px solid #aaa;">
						<input type="number" @input="verify" class="flex" maxlength="5" value="" placeholder="5位短信验证码" placeholder-style="color:#aaa" />
						<button class="inputright" type="default" :disabled="codebtn" @click="getcode" v-cloak>{{codetext}}</button>
					</view>
					<input class="uni-input" @input="pwdInput" password type="text" placeholder="请输入登录密码" placeholder-style="color:#aaa" style="background: transparent;"  />
					<input class="uni-input" @input="pwd2Input" password type="text" placeholder="请确认登录密码" placeholder-style="color:#aaa" style="background: transparent;"  />
					<input class="uni-input" @input="midInput" type="number" placeholder="请输入邀请码" placeholder-style="color:#aaa" style="background: transparent;" />
				</view>
				<button type="" class="login-btn" @click="register" :loading="loading" style="background: #FF5555;color:#fff" >立即注册</button>
				<view class="btn-group webkit" style="border: 0;margin: 0 30upx;">
					<view class="flex"></view>
					<button type="primary" @click="backlogin" style="color:#aaa">返回登录</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				res: [],
				area: true,
				top: false,
				systemInfo: {},
				loading: false,
				timestamp: 0,
				mobile: '',
				pwd: '',
				pwd1: '',
				imgcode: "",
				agentid: "",
				verifycode: '',
				codetext: '获取验证码',
				codebtn: false,
				codenum: 60
			};
		},
		onLoad: function() {
			uni.getSystemInfo({
				success: (res) => {
					this.systemInfo = res
				}
			})
			var timestamp = (new Date()).getTime();
			this.timestamp = timestamp
		},
		methods: {
			change(e) {
				if (e.currentTarget.dataset.id == 1) {
					this.area = false
					this.top = true
				} else {
					uni.showToast({
						title: '请联系管理员',
						icon: "none"
					});
				}
			},
			changeImg() {
				var timestamp = (new Date()).getTime();
				this.timestamp = timestamp
			},
			getcode() {
				if (this.mobile == "") {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
				} 
				// else if (this.imgcode == "") {
				// 	uni.showToast({
				// 		title: '请输入图形验证码',
				// 		icon: "none"
				// 	});
				// } 
				else {
					uni.request({
						url: 'http://m.wpweipin.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=account.verifycode&app=1',
						method: 'POST',
						data: {
							mobile: this.mobile,
							temp: 'sms_reg',
							imgcode: this.imgcode
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							uni.showToast({
								title: res.data.result.message,
								icon: "none"
							});
							if (res.data.status == 1) {
								this.codebtn = true
								var codetexts = setInterval(() => {
									this.codenum = this.codenum - 1
									this.codetext = this.codenum + 's'
								}, 1000)
								setTimeout(() => {
									this.codebtn = false
									clearInterval(codetexts);
									this.codetext = '重新发送'
								}, 60000)
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			register() {
				if (this.mobile == "") {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
				} else if (this.pwd == "") {
					uni.showToast({
						title: '请输入登录密码',
						icon: "none"
					});
				} else if (this.pwd1 == "") {
					uni.showToast({
						title: '请确认登录密码',
						icon: "none"
					});
				} else if (this.verifycode == "") {
					uni.showToast({
						title: '请输入短信验证码',
						icon: "none"
					});
				} else {
					this.loading = true
					uni.request({
						url: 'http://m.wpweipin.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=account.register&type=0&app=1',
						method: 'POST',
						data: {
							mobile: this.mobile,
							pwd: this.pwd,
							pwd1: this.pwd1,
							verifycode: this.verifycode,
							agentid:this.agentid
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							this.loading = false
							uni.showToast({
								title: res.data.result.message,
								icon: "none"
							});
							if (res.data.status == 1) {
								uni.navigateBack();
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			backlogin() {
				uni.navigateBack();
			},
			mobileInput(e) {
				this.mobile = e.target.value
			},
			imgcodeInput(e) {
				this.imgcode = e.target.value
			},
			pwd2Input(e) {
				this.pwd1 = e.target.value
			},
			pwdInput(e) {
				this.pwd = e.target.value
			},
			midInput(e) {
				this.agentid = e.target.value
			},
			verify(e) {
				this.verifycode = e.target.value
			}
		}
	}
</script>

<style>
	/* page {background-color:#fff;} */
	.logo {display:block;margin:0 auto 60upx;width: 200upx;margin-top: 100upx;}
	.area.webkit {
		position: absolute;
		z-index: 999;
		top: 50%;
		margin-top: -280upx;
		border: 0;
	}

	.area view {
		width: 280upx;
		height: 280upx;
		border: 2upx solid #fff;
		box-sizing: border-box;
		border-radius: 10px;
		padding-top: 56upx;
		background: #FFFFFF0A;
	}

	.area image {
		width: 100upx;
		height: 100upx;
		display: block;
		margin: 0 auto;
	}

	.area text {
		display: block;
		color: #fff;
		text-align: center;
		margin-top: 10upx;
	}

	.top {
		width: 180upx;
		height: 180upx;
		border-radius: 50%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		display: block;
		position: absolute;
		left: 50%;
		margin-left: -90upx;
		top: -200upx;
		transition: .3s all;
	}

	.register .top {
		top: 200upx;
	}

	.uni-list-cell {
		width: 50%;
		padding: 24upx 80upx;
	}

	.uni-list-cell:after {
		display: none;
	}

	.with-fun .uni-icon {
		width: 40px;
		height: 40px;
		line-height: 40px;
		-webkit-flex-shrink: 0;
		-ms-flex-negative: 0;
		flex-shrink: 0;
	}

	.btn-group button {
		background: transparent;
		color: #fff;
		font-size: 28upx;
		margin: 0;
		padding: 0;
		opacity: .8;
	}

	.btn-group button:after {
		display: none;
	}

	input {
		margin: 0 30upx;
		padding: 24upx;
		background: transparent;
		color: #fff;
		border-bottom: 1px solid #aaa;
	}

	.login-btn {
		color: #fff;
		border: 2upx solid #fff;
		background: transparent;
		height: 84upx;
		line-height: 84upx;
		font-size: 28upx;
		margin: 50upx 30upx 10upx;
	}

	.login-btn:after {
		display: none;
	}

	uni-button[loading][type=default] {
		color: rgba(255, 255, 255, 0.6);
		background-color: transparent;
	}

	.content {
		position: absolute;
		width: 100%;
		top: 230upx;
		transition: .3s all;
	}

	.register .content {
		top: 400upx;
		padding: 40upx;
		box-sizing: border-box;
	}

	.inputright {
		width: 200upx;
		height: 52upx;
		margin-top: 24upx;
	}

	button.inputright {
		line-height: 48upx;
		font-size: 24upx;
		background: transparent;
		color: #aaa;
		border: 2upx solid #fff;
	}

	input.flex {
		border: 0;
		margin: 0 0upx;
	}

	.webkit {
		border-bottom: 1px solid #fff;
	}
</style>
